<template>
  <div class="home">
    <div class="header">
      <img src="@/assets/1.png" alt="">
      <span>智能检测</span>
      <span class="active">智能分析</span>
      <img src="@/assets/2.png" alt="" @click="goBack()">
      <span>辅助决策</span>
      <span>微件管理</span>
      <div class="time">
        <p>{{ nowData.hours }}:{{ nowData.minutes }}:{{ nowData.second }}</p>
        <p>{{ nowData.year }}/{{ nowData.month }}/{{ nowData.date }} {{ nowData.week }}</p>
      </div>
    </div>
    <div class="main">
      <div class="query">
        <el-form ref="queryForm" size="small" :inline="true">
          <el-form-item label="所属单位">
            <treeselect
              v-model="query.bureauCode"
              :normalizer="normalizer"
              @select="onSelect"
              size="small"
              placeholder="选择所属单位" style="width: 200px"
              :options="affiliatedUnit"/>
          </el-form-item>
          <el-form-item label="变电站">
            <el-input v-model="query.siteName" placeholder="请输入变电站"></el-input>
          </el-form-item>
          <el-form-item label="电压等级">
            <el-select v-model="query.voltageGrade" placeholder="请选择电压等级">
              <el-option v-for="item in voltageClasses" :key="item.value" :label="item.name"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备类型">
            <el-input v-model="query.classifyName" placeholder="请输入设备类型"></el-input>
          </el-form-item>
          <el-form-item label="缺陷设备">
            <el-input v-model="query.deviceName" placeholder="请输入缺陷设备"></el-input>
          </el-form-item>
          <el-form-item label="缺陷等级">
            <el-select v-model="query.defectLevel" placeholder="请选择缺陷等级">
              <el-option label="危急" :value="1"></el-option>
              <el-option label="重大" :value="2"></el-option>
              <el-option label="一般" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="运维单位">
            <treeselect
              v-model="query.teamOid"
              @select="onSelect2" :normalizer="normalizer" :disabled="disable"
              placeholder="请选择运维单位" style="width: 200px"
              :options="operationAndMaintenanceUnit"/>
          </el-form-item>
          <el-form-item label="生产厂家">
            <el-input v-model="query.vendorName" placeholder="请输入生产厂家"></el-input>
          </el-form-item>
          <el-form-item label="责任原因">
            <el-input v-model="query.dutyReason" placeholder="请输入责任原因"></el-input>
          </el-form-item>
          <el-form-item label="专业大类">
            <el-select v-model="query.specialityBigType" placeholder="请选择专业大类">
              <el-option label="输电" :value="1"></el-option>
              <el-option label="变电" :value="2"></el-option>
              <el-option label="配电" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发现日期">
            <el-date-picker
              v-model="query.findTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="数据来源">
            <el-input v-model="query.defectSourceType" placeholder="请输入数据来源"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="search" type="primary">查询</el-button>
            <el-button @click="reset" type="primary">重置</el-button>
            <el-button @click="exportForm" type="primary">导出</el-button>
          </el-form-item>
        </el-form>
      </div>
      <img src="@/assets/3.png" alt="">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column align="center" type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="defectCode" label="缺陷编号">
        </el-table-column>
        <el-table-column prop="bureauName" label="单位名称">
        </el-table-column>
        <el-table-column prop="teamOname" label="运维单位">
        </el-table-column>
        <el-table-column prop="siteName" label="变电站">
        </el-table-column>
        <el-table-column prop="voltageGrade" label="电压等级">
        </el-table-column>
        <el-table-column prop="classifyName" label="设备类型">
        </el-table-column>
        <el-table-column prop="deviceName" label="缺陷设备">
        </el-table-column>
        <el-table-column prop="defectLevelName" label="缺陷等级">
        </el-table-column>
        <el-table-column prop="dutyReason" label="责任原因">
        </el-table-column>
        <el-table-column prop="specialityBigName" label="缺陷大类">
        </el-table-column>
        <el-table-column prop="findTime" label="发现时间">
        </el-table-column>
        <el-table-column prop="defectSourceName" label="数据来源">
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="getHomeList"
        @size-change="getHomeList"
        :current-page.sync="query.current"
        :page-sizes="[10, 20, 50]"
        :page-size.sync="query.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 10px; text-align: right"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getOrgTree, getOperationOrgTree } from '@/utils/http'
import { exportForm, getDictData, getHomeList } from '../../utils/http'

export default {
  name: 'HomePage',
  components: { Treeselect },
  data () {
    return {
      value: null,
      nowData: {},
      tableData: [],
      total: 0,
      // 电压等级
      voltageClasses: [],
      // 所属单位
      affiliatedUnit: [],
      // 运维单位
      operationAndMaintenanceUnit: [],
      query: {
        current: 1,
        size: 10,
        // 单位名称
        bureauCode: undefined,
        // 变电站
        siteName: undefined,
        // 电压等级
        voltageGrade: undefined,
        // 缺陷设备
        deviceName: undefined,
        // 设备类型
        classifyId: undefined,
        // 缺陷等级
        defectLevel: undefined,
        // 运维单位（传id）
        teamOid: undefined,
        // 生产厂家
        vendorName: undefined,
        // 责任原因
        dutyReason: undefined,
        // 缺陷大类
        specialityBigType: undefined,
        // 发现日期
        findTime: undefined,
        // 缺陷来源
        defectSourceType: undefined
      },
      disable: true
    }
  },
  mounted () {
    let _this = this
    window.setInterval(function () {
      _this.getTime()
    }, 1000)
    this.getDictData()
    this.getOrgTree()
    this.getHomeList()
  },
  methods: {
    normalizer (node) {
      return { id: node.orgId, label: node.orgName, children: node.childList }
    },
    onSelect (node) {
      this.query.bureauCode = node.orgId
      this.operationAndMaintenanceUnit = []
      this.getOperationOrgTree()
    },
    onSelect2 (node) {
      this.query.teamOid = node.orgId
    },
    search () {
      this.query.current = 1
      this.getHomeList()
    },
    reset () {
      this.$refs.queryForm.resetFields()
      this.query = {
        current: 1,
        size: 10,
        // 单位名称
        bureauCode: undefined,
        // 变电站
        siteName: undefined,
        // 电压等级
        voltageGrade: undefined,
        // 缺陷设备
        deviceName: undefined,
        // 设备类型
        classifyId: undefined,
        // 缺陷等级
        defectLevel: undefined,
        // 运维单位（传id）
        teamOid: undefined,
        // 生产厂家
        vendorName: undefined,
        // 责任原因
        dutyReason: undefined,
        // 缺陷大类
        specialBigType: undefined,
        // 发现日期
        findTime: undefined,
        // 缺陷来源
        defectSourceType: undefined
      }
      this.operationAndMaintenanceUnit = []
      this.search()
    },
    // 获取 电压等级
    async getDictData () {
      const { result } = await getDictData({ codeTypeList: [ 'voltage' ] })
      this.voltageClasses = result[0].valueList
    },
    getTime () {
      const nowData = new Date()
      const weekDay = [
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六',
        '星期日'
      ]
      const date = {
        year: nowData.getFullYear(),
        month:
          nowData.getMonth() + 1 < 10
            ? '0' + (nowData.getMonth() + 1)
            : nowData.getMonth() + 1,
        date: nowData.getDate(),
        hours:
          nowData.getHours() < 10
            ? '0' + nowData.getHours()
            : nowData.getHours(),
        minutes:
          nowData.getMinutes() < 10
            ? '0' + nowData.getMinutes()
            : nowData.getMinutes(),
        second:
          nowData.getSeconds() < 10
            ? '0' + nowData.getSeconds()
            : nowData.getSeconds(),
        week: nowData.getDay()
      }
      weekDay.forEach((item, index) => {
        if (parseInt(date.week) - 1 === index) {
          date.week = item
        }
      })
      this.nowData = date
    },
    // 获取列表
    async getHomeList () {
      const data = await getHomeList(this.query)
      this.tableData = data.result.records
      this.total = data.result.total
    },
    // 组织机构树-单位
    async getOrgTree () {
      let { result } = await getOrgTree()
      this.affiliatedUnit = [ result ]
    },
    // 组织机构树-运维单位
    async getOperationOrgTree () {
      let { result } = await getOperationOrgTree({ rootId: this.query.bureauCode })
      this.operationAndMaintenanceUnit = [ result ]
    },
    goBack () {
      this.$router.push('/')
      this.$store.dispatch('exitSuccess')
    },
    async exportForm () {
      const data = await exportForm(this.query)
      const link = document.createElement('a')
      console.log(data.$responseBody.headers['content-disposition'])
      let fileName = decodeURI(data.$responseBody.headers['content-disposition'].split('filename=')[1])
      let blob = new Blob([ data.$responseBody.data ], { type: 'application/vnd.ms-excel' })
      console.log(blob.filename)
      link.style.display = 'none'
      console.log(blob)
      link.href = URL.createObjectURL(blob)
      link.download = `${fileName}.xls`
      link.click()
    }
  },
  watch: {
    'query.bureauCode' () {
      if (!this.query.bureauCode) {
        this.operationAndMaintenanceUnit = []
        this.disable = true
      } else {
        this.disable = false
      }
    }
  }
}
</script>

<style lang="less">
.home {
  width: 100%;
  height: 100%;
  color: #222222;

  .header {
    height: 50px;
    display: flex;
    background: #f4f5f9;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 0 10px;

    span {
      height: 40px;
      background: #d7dff1;
      padding: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 3px;
      cursor: pointer;

      &.active {
        background: #bbbdc4;
      }
    }

    img {
      flex-shrink: 0;
      height: 50px;
    }

    .time {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;
      width: 210px;
      flex-shrink: 0;

      p {
        font-size: 14px;
      }

      p:first-of-type {
        font-size: 22px;
      }
    }
  }

  .main {
    padding: 40px;

    img {
      height: 50px;
      display: block;
      margin: 0 auto;
      margin-bottom: 20px;
    }
  }
}
</style>

<style>
.vue-treeselect__control {
  height: 32px;
}
</style>
